<template>
  <span v-if="props.showText"></span>
  <el-input
    v-else
    v-model="currValue"
    type="password"
    @input="handleInput"
    @blur="handleBlur"
  ></el-input>
</template>

<script setup>
import {ref} from 'vue';

const emit = defineEmits(['update:modelValue', 'change', 'blur']);
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  showText: Boolean,
});

const currValue = ref('');

const handleInput = (val) => {
  currValue.value = val;
  emit('update:modelValue', val);
  emit('change', val);
};

const handleBlur = (event) => {
  emit('update:modelValue', currValue.value);
  emit('blur', event);
};
</script>

<style scoped>
</style>